<template>
	<view>
		
		<view class="user">
		
		    
			<view class="title"
			:class="userInfo.staffName.length == 2?'titleo':''">
				<view  class="title-left">
					{{userInfo.staffName}}
				</view>
				<view class="title-right">
					{{userInfo.storeManager?'店员':'店长'}}
				</view>
			</view>
			
			<view class="user-body">
				<view class="body-item">
					<text class="item-left">
						联系电话：
					</text>
					<text class="">
						{{userInfo.tel}}
					</text>
				</view>
				<view class="body-item">
					<text class="item-left">
						门店名称：
					</text>
					<text class="">
						{{userInfo.shopName}}
					</text>
				</view>
				<view class="body-item">
					<text class="item-left">
						门店ID：
					</text>
					<text class="">
						{{userInfo.shopId}}
					</text>
				</view>
				<view class="body-item">
					<text class="item-left">
						商户名称：
					</text>
					<text class="">
						{{userInfo.merchantName}}
					</text>
				</view>
				<view class="body-item">
					<text class="item-left">
						商户ID：
					</text>
					<text class="">
						{{userInfo.merchantId}}
					</text>
				</view>
			</view>
		   

		</view>
		
		<view  class="image">
			<view class="image-title">
				    <text class='text'>微信收款码</text> 
			</view>
			<view class="im" @click="selectImage">
				<image  mode="widthFix" :src="src"></image>
			</view>
			<text class="te">上传微信收款码照片</text>
		</view>
		
		<view class="tijiao">
			<view class="tj" @click="outlogin">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	import {udpImage,udpnewImage,getUserInfo} from '../../api/index.js'
	export default {
		data() {
			return {
				userInfo:{},
				src:'../../static/images/wx@2x.png'
			}
		},
		async onLoad(){
			this.getuserInfo()
			const info = await getUserInfo(this.userInfo.tel)
			uni.setStorageSync('info',info)
			this.src = info.wxPay
		},
		methods: {
			//退出登录
			outlogin(){
				uni.showModal({
					title:'提示',
					content:'确认退出吗？',
					success:({confirm})=>{
						if(confirm){
							uni.removeStorageSync('user')
							uni.removeStorageSync('info')
							uni.navigateBack({
								delta:1
							})
							
						}
					}
				})
			},
			// 获取用户信息
			getuserInfo(){
				const user = uni.getStorageSync('user')
				const info = uni.getStorageSync('info')
				this.userInfo = {...user,...info}
				this.src = info.wxPay
			},
			// 点击上传图片
			 selectImage(){
				uni.showModal({
					title:'提示',
					content:'此操作将更新收款码，是否继续？',
					success:async ({confirm})=>{
						if(confirm){
							const path =  await udpImage()
							const res = await udpnewImage({
								staffId:this.userInfo.id,
								wxPay:path
							})
							uni.removeStorageSync('info')
							const info = await getUserInfo(this.userInfo.tel)
							uni.setStorageSync('info',info)
							this.src = info.wxPay
							uni.showToast({
								title:"上传成功",
								icon:'none'
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	
	.user{
		width: 686rpx;
		border-radius: 0 0 24rpx 24rpx;
		margin: 30rpx auto;
		background-color: #fff;
		padding-bottom: 40rpx;
		/* border:1px solid red; */
	}
	
	.title{
		width: 100%;
		height: 124rpx;
		background-color: #F6F6F6!important;
		background-image: url(../../static/images/Group.png);
		background-size: cover;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0 40rpx 0 45rpx;
	}
	.titleo{
		padding:0 40rpx 0 65rpx;
	}
	.title-left{
		font-size: 40rpx;
		color: #fff;
		
		
	}
	.title-right{
		width: 136rpx;
		height: 78rpx;
		border-radius: 94rpx;
		background-color: #ECF1FE;
		font-size: 28rpx;
		text-align: center;
		line-height: 78rpx;
		color: #8CA7F8;
	}
	
	.user-body{
		width: 100%;
		padding:0 40rpx 0 40rpx;
		/* border-radius: 24rpx 0 0 0; */
		/* border: 1px solid red; */
	}
	.body-item{
		display: flex;
		justify-content: space-between;
		margin: 32rpx 0;
	}
	.item-left{
		font-size: 28rpx;
		color: #999;
		width: 150rpx;
	}
	.item-right{
		font-size: 28rpx;
		color: #333;
		flex: 3;
	}
	.cu-item{
		padding:0 40rpx 0 40rpx;
	}
	
	.image{
		width: 686rpx;
		height: 662rpx;
		border-radius: 24rpx;
		margin: 30rpx auto;
		background-color: #fff;
		
	}
	
	.text{
		font-size: 32rpx;
		color: #333;
		font-weight: 700;
		padding: 0 40rpx;
	}
	
	.image-title{
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
	}
	.im{
		width: 378rpx;
		height: 378rpx;
		border-radius: 16rpx;
		background-color: #f6f6f6;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 40rpx auto;
		}
	.im>image{
		width: 100%rpx;
		height: 100%rpx;
	}
	.te{
		display: block;
		font-size: 28rpx;
		color: #999;
		text-align: center;
		margin-top: 40rpx;
	}
	
	
	
	.tj{
		width: 686rpx;
		height: 100%;
		background-color: #4470F4;
		border-radius: 56rpx;
		text-align: center;
		margin: 0 auto;
		font-size: 32rpx;
		color: #fff;
		font-weight: 700;
		text-align: center;
		line-height:120rpx ;
	}
</style>
